<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for迭代对象数组</title>
  <script type="text/javascript" src="vue.js"></script>
  <style>
    img {
      max-width: 150px;
      margin-right: 20px;
    }
  
    .li {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
    }
  
    h3 {
      font-weight: 400;
    }
  
    p {
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="li" v-for="item in list" v-bind:key="item.productId">
      <img :src="item.picture" /> 
      <div>
        <h3>{{item.name}}</h3>
        <p>￥{{item.price}}</p>
      </div>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data:{
        list: [
          { productId: 1, name: '柯西-施瓦兹不等式马克杯', picture: 'https://cases.geekfun.website/Vue+Bootstrap/ch6/images/pic1.png', price: 45.98 },
          { productId: 2, name: '泊松分布马克杯', picture: 'https://cases.geekfun.website/Vue+Bootstrap/ch6/images/pic2.png', price: 36.98 },
          { productId: 3, name: '余弦定理马克杯', picture: 'https://cases.geekfun.website/Vue+Bootstrap/ch6/images/pic3.png', price: 88.98 },
          { productId: 4, name: '正弦定理马克杯', picture: 'https://cases.geekfun.website/Vue+Bootstrap/ch6/images/pic4.png', price: 66.98 },
        ]
      }
    })
  </script>
</body>
</html>
